//配置路由相关信息
import VueRouter from 'vue-router'

import Vue from 'vue'


// import Home from "../components/Home";
// import About from "../components/About";
// import User from "../components/User"

/**
 * build  打包产生3个文件 (没有使用路由懒加载)
 *
 * app.xxx.js  用户自己写的js
 * maintest.js 底层支持  es6 解析  ，commonJs解析
 * vendro.js  第三方插件
 *
 *
 * 使用路由懒加载之后
 * 除了上面3个意外 还会多很多 有几个需要的vue组件，就有几个js
 *
 * 记住，一切皆模块的思想
 *
 */
//路由懒加载   每个组件打包成1个js  按需加载
const Home=()=>import("../components/Home")
//嵌套路由  home 里面还有2个连接
const HomeMessage=()=>import("../components/HomeMessage")
const HomeNews=()=>import("../components/HomeNews")

const About=()=>import("../components/About")
const User=()=>import("../components/User")




//1. 通过Vue.use(插件) ，安装插件
Vue.use(VueRouter)

const routes=[
  {
    path: '/',
    //重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首页'
    },
    //子路由里面  path 不用加 /
    children: [
      // {
      //   path: '',
      //   redirect: 'message'
      // },
      {
        path: 'message',
        component: HomeMessage
      },
      {
        path: 'news',
        component: HomeNews
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    },
    //组件内的守卫
    beforeEnter(to,from,next){
      // console.log("beforeEnter abou");
      next()
    }
  },
  {
    path: '/user/:userId',
    component: User,
    meta: {
      title: '用户'
    },
  }
]
//2. 创建路由对象
const router=new VueRouter({
  routes,
  // 默认是hash 模式 url连接有 /#home/   看着别扭   history 模式是正常的  /home
  mode: 'history'
})

//3. 讲 router 对象传递 到vue实例
export default router
